<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="isAdd?'立项申请':'项目编辑'"
    :visible.sync="shows"
    :before-close="cancel"
    width="92%"
    top="5vh"
    lock-scroll
    :append-to-body="true"
  >
    <div class="edit-form">
      <el-form status-icon :model="datas" :rules="rules" @keyup.enter.native="save" ref="editForm">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item prop="project_no" label="项目编号" :label-width="baseStyle.width">
              <el-input
                v-if="isAdd"
                @blur="checkProjectNo"
                v-model="datas.project_no"
                autocomplete="off"
              ></el-input>
              <el-input v-else v-model="datas.project_no" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_name" label="项目名称" :label-width="baseStyle.width">
              <el-input maxlength="15" v-model="datas.project_name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_class" label="项目类别" :label-width="baseStyle.width">
              <el-select
                v-if="isAdd"
                v-model="datas.project_class"
                placeholder="请选择"
                style="width: 100%;"
                @change="changeClassic"
              >
                <el-option
                  v-for="item in classicList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.status==0"
                ></el-option>
              </el-select>
              <el-input v-else v-model="datas.class_name" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_level" label="优先级别" :label-width="baseStyle.width">
              <el-select v-model="datas.project_level" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in levelDatas"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_pm" label="项目经理" :label-width="baseStyle.width">
              <el-select
                v-model="datas.project_pm"
                placeholder="请输入关键字搜索"
                style="width: 100%;"
                filterable
                remote
                reserve-keyword
                :remote-method="(val)=>{getUserList(val,1)}"
              >
                <el-option
                  v-for="item in datas.pmList"
                  :key="item.id"
                  :label="item.realname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_skiller" label="技术负责人" :label-width="baseStyle.width">
              <el-select
                v-model="datas.project_skiller"
                placeholder="请输入关键字搜索"
                style="width: 100%;"
                filterable
                remote
                reserve-keyword
                :remote-method="(val)=>{getUserList(val,2)}"
              >
                <el-option
                  v-for="item in datas.skillerList"
                  :key="item.id"
                  :label="item.realname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="devTest" label="开发测试人员" :label-width="baseStyle.width">
              <el-select
                v-model="datas.devTest"
                multiple
                collapse-tags
                placeholder="请输入关键字搜索"
                style="width: 100%;"
                filterable
                remote
                :remote-method="(val)=>{getUserList(val,3)}"
              >
                <el-option
                  v-for="(item,index) in datas.teamData"
                  :key="item.id+'qww'+index"
                  :label="item.realname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="!isAdd">
            <el-form-item prop="month_plan" label="本月计划：" :label-width="baseStyle.width">
              <el-input readonly v-model="datas.month_plan" placeholder="暂无计划"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="project_des" label="项目描述" :label-width="baseStyle.width">
              <el-input
                v-model="datas.project_des"
                autocomplete="off"
                type="textarea"
                rows="3"
                maxlength="200"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="information" label="项目资料" :label-width="baseStyle.width">
              <el-col :span="6">
                <el-upload
                  ref="upload"
                  :show-file-list="false"
                  class="upload-demo"
                  drag
                  :action="`${baseURL}api/tools/uploadpic`"
                  multiple
                  :file-list="fileList"
                  :on-success="uploadSuccess"
                  :on-error="uploadError"
                  :auto-upload="false"
                  :on-change="handleChange"
                  :before-upload="beforeUpload"
                  :on-remove="handleChange"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">选取文件</div>
                  <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
                <el-button size="small" type="primary" @click="uploadHandle">点击上传</el-button>
              </el-col>
              <el-col :span="15" style="height:150px;overflow-y:auto;">
                <div class="files-list" v-for="(item,index) in fileList" :key="index">
                  <a :href="item.downLoade" target="_bank">
                    {{item.name}}
                    <span
                      :style="`font-size:12px;color:${item.status=='success'?'#67C23A':'#606266'}`"
                    >{{item.status=="success"?"已上传":"未上传"}}</span>
                  </a>
                  <i class="el-icon-delete" @click="handleDelChange(item.name)"></i>
                </div>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col v-if="false" :span="12">
            <!--  monthPlan    -->
            <el-form-item
              prop="curMonthPlan"
              :label="`当月计划（${month}月）`"
              :label-width="baseStyle.width"
            >
              <el-input
                v-model="datas.curMonthPlan"
                type="textarea"
                :readonly="datas.curMonthPlan?true:false"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="monthPlanList" label="计划列表" :label-width="baseStyle.width">
              <div
                v-for="(item,index) in datas.monthPlanList"
                :key="index"
              >{{`${item.time}：${item.plan}`}}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="editDataForm">
        <el-row :gutter="10">
          <el-form-item prop="currentStage" label="项目阶段" :label-width="baseStyle.width"></el-form-item>
          <el-col :span="24">
            <el-col v-for="(item,index) in stageData" :span="8" :key="index">
              <el-form-item
                :rules="[
              {validator: validDateDate, trigger: ['blur','change'] }
              ]"
                :prop="`data${item.id}`"
                :label="item.name"
                :label-width="baseStyle.width"
              >
                <el-date-picker
                  @change="dateChange(item.value,index)"
                  v-model="item.value"
                  type="daterange"
                  :disabled="item.disabled"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="timestamp"
                  style="width:100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col v-if="!isAdd?true:false" :span="24">
            <el-form-item prop="mettingItems" label="项目会议待确认事项" :label-width="baseStyle.width">
              <el-button :type="'primary'" size="small" @click="addThings">新增会议事项</el-button>
              <div>
                <div v-for="(thing,index) in datas.mettingItems" :key="index">
                  <div>
                    {{`${index+1}、会议时间：${thing.date_time.slice(0,10)}`}}
                    <!-- <el-button style="margin-left: 20px;" size="mini" @click="editThings(thing)">编辑</el-button>
                    <el-button style="margin-left: 10px;" size="mini" @click="delThings(thing)">删除</el-button>-->
                  </div>
                  <div class="things-item">
                    <span
                      class="item-title"
                      @click="checkChange(thing,index)"
                    >{{`事项：${thing.content}`}}</span>
                    <i v-if="thing.status===1" class="el-icon-circle-check" style="color:#67C23A" />
                    <i v-if="thing.status===0" class="el-icon-circle-close" />
                    <span
                      v-if="thing.status===0&&thing.reason&&thing.reason!=undefined"
                      class="item-mark"
                    >未通过原因：{{thing.reason}}</span>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button :type="'primary'" :loading="loading" @click.native="save">保存</el-button>
    </div>
    <InnerDialog
      ref="innerEditForm"
      :baseStyle="baseStyle"
      :project_id="datas.project_id"
      :innerSave="innerSave"
      :isAddInner="isAddInner"
    />
  </el-dialog>
</template>

<script>
import baseURL from "@utils/upLoadBaseUrl";
import API from "@apis/newProject";
import classicAPI from "@apis/projectClassic";
import disposeAPI from "@apis/projectDispose";
import { Message } from "element-ui";
import InnerDialog from "./innerEditForm";
import { formatDate } from "@light-app/assets/js/dateFormate";

export default {
  name: "editForm",
  props: {
    baseStyle: Object,
    datas: Object,
    shows: Boolean,
    isAdd: Boolean,
    saveForm: Function,
    uid: Number
  },
  data() {
    const rules = this.getRules();
    return {
      loading: false,
      fileList: [],
      filesData: [],
      baseURL: baseURL,
      rules,
      levelDatas: [
        { label: "A", value: "A" },
        { label: "B", value: "B" },
        { label: "C", value: "C" }
      ],
      //innerdialog参数
      innerVisible: false,
      isAddInner: false,
      month: "",
      teamlistInfo: {},

      userPage: 1,
      userDatas: [],
      classicList: [],
      stageData: [],
      stageId: "", //stageID
      stateMsg: ""
    };
  },
  components: {
    InnerDialog
  },
  computed: {},
  created() {
    // console.log(this.baseURL.slice(0,-1),"baseURL")
    var date = new Date();
    this.month = date.getMonth() + 1;
    this.getMettingList();
    this.getClassicList();
    if (!this.isAdd) {
      this.stageData = this.datas.project_stageroute_object.map(item => {
        return {
          name: item.stage_name,
          id: item.stage_id,
          stage_id: item.stage_id,
          disabled: false,
          value: [new Date(item.start_time), new Date(item.end_time)]
        };
      });
    }
    this.datas.project_file
      ? this.datas.project_file.map(item => {
          this.fileList.push({
            name: item.name || item.path,
            path: item.path,
            downLoade: baseURL.slice(0, -1) + item.path,
            status: "success"
          });
        })
      : "";
  },
  methods: {
    //check项目number是否重复
    checkProjectNo(evevt) {
      // console.log(evevt.target.value,111)
      API.findProjectNo(evevt.target.value)
        .then(res => {
          this.$message.error("项目编号重复了！");
        })
        .catch(err => {
          return;
        });
    },
    //获取会议列表
    getMettingList() {
      API.getMettingLists(this.datas.project_id)
        .then(res => {
          this.$set(this.datas, "mettingItems", res.data);
        })
        .catch(err => this.$message.error(err.message));
    },
    //立项申请的项目类别下拉框数据getPLanList
    getClassicList() {
      classicAPI
        .getList()
        .then(res => {
          this.classicList = [...res.list];
        })
        .catch(err => this.$message.error(err.message));
    },
    //根据立项申请的项目类别下拉框数据获取阶段
    getStageList(val) {
      disposeAPI
        .getPLanList(val)
        .then(res => {
          let list = [...res.list];
          if (list.length <= 0) {
            this.stageId = [];
            this.$message.warning("请选择有项目阶段的项目类别!");
          }
          this.stageData = list.map(item => {
            return { ...item, value: "", disabled: false };
          });
          //重新赋值后清空表单校验
          this.$nextTick(function() {
            this.$refs.editDataForm.clearValidate();
          });
        })
        .catch(err => this.$message.error(err.message));
    },
    //uploade组件外部手写list展示删除函数
    handleDelChange(name) {
      let fileLists = this.fileList.filter(item => item.name !== name);
      this.fileList = [...fileLists];
      this.filesData = [];
      if (fileLists.length > 0) {
        fileLists.map(item => {
          if (item.status === "success") {
            this.filesData.push({ ...item, path: item.response.path });
          }
          if (!this.isAdd && item.path) {
            this.filesData.push({ ...item, path: item.path });
          }
        });
      }
      // console.log(fileLists, "DElfileLists");
      // console.log(this.fileList, "this.fileList");
      // console.log(this.filesData, "this.filesData");
    },
    handleChange(file, fileList) {
      // console.log(file, fileList, "handleChange");
      this.fileList = fileList;
      this.filesData = [];
      if (fileList.length > 0) {
        fileList.map(item => {
          if (item.response && item.response.status) {
            this.filesData.push({ ...item, path: item.response.path });
          }
          if (!this.isAdd && item.path) {
            this.filesData.push({ ...item, path: item.path });
          }
        });
      }
    },
    beforeUpload(file) {
      if (file.size <= 0) {
        return false;
      }
    },
    uploadHandle() {
      if (this.fileList.length > 0) {
        this.$refs.upload.submit();
      } else {
        this.$message.warning("请先选择文件再上传");
        return;
      }
    },
    uploadSuccess(response, file, fileList) {
      if (!response.status) {
        this.$message.error(response.msg);
      }
    },
    uploadError(err, file, fileList) {
      this.$message.error("图片上传出错");
    },

    //remoteMethod:userList
    getUserList(word = "", type) {
      if (type === 3 && word == "") {
        return;
      }
      API.getUserList({ page: this.userPage, keyword: word })
        .then(res => {
          if (type === 1) {
            this.datas.pmList = [...res.data];
          }
          if (type === 2) {
            this.datas.skillerList = [...res.data];
          }
          if (type === 3) {
            let oldIDs = this.datas.teamData.map(item => item.id);
            let newData = [...res.data, ...this.datas.teamData];
            newData.forEach(item => {
              if (oldIDs.indexOf(item.id) < 0) {
                this.datas.teamData.unshift(item);
              }
            });
          }
        })
        .catch(err => this.$message.error(err.message));
    },
    //会议
    innerSave(data) {
      API.getMettingAdd({
        uid: this.uid,
        project_id: this.datas.project_id,
        ...data
      })
        .then(res => {
          this.getMettingList();
          this.$refs.innerEditForm.cancelAdd();
        })
        .catch(err => this.$message.error(err.message));
    },
    cancel() {
      this.loading = false;
      this.$emit("update:shows", false);
      this.$emit("update:datas", {});
      this.loading = false;
      this.filesData = [];
      if (this.isAdd) {
        this.$refs.upload.clearFiles();
      }
      this.$refs.editForm.resetFields();
    },

    //新增会议事项
    addThings() {
      this.isAddInner = true;
      this.innerData = {};
      this.$refs.innerEditForm.openAddThings();
    },
    //编辑会议事项
    editThings(data) {
      // console.log(data, "data");
      this.isAddInner = false;
      this.innerData = { ...data };
      this.$refs.innerEditForm.openAddThings();
    },
    //删除会议事项
    delThings(data) {
      this.$confirm("删除会议事项, 是否继续?", "提示", {
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          API.getMettingDel(data.id)
            .then(res => {
              this.getMettingList();
            })
            .catch(err => {
              console.log(err, "err");
            });
        })
        .catch();
    },
    //修改会议事项状态
    statusChange(thin, isPass) {
      let parmars = {
        id: thin.id,
        status: 1,
        reason: ""
      };
      if (!isPass) {
        parmars.reason = this.stateMsg;
        parmars.status = 0;
      }
      API.changeMettingStatus(parmars)
        .then(res => {
          this.getMettingList();
        })
        .catch(err => {
          return thin.status;
        });
    },
    checkChange(thin, index) {
      this.$confirm("更改状态, 是否继续?", "提示", {
        closeOnClickModal: false,
        confirmButtonText: "通过",
        cancelButtonText: "不通过",
        showInput: true,
        distinguishCancelAndClose: true,
        beforeClose: (action, instance, done) => {
          // console.log(action,"action", instance.inputValue);
          if (action === "cancel" && !instance.inputValue) {
            this.$message.warning("请备注不通过原因");
            return;
          }
          this.stateMsg = instance.inputValue;
          done();
        },
        inputPlaceholder: "若不通过请注明原因",
        type: "warning"
      })
        .then(({ value }) => {
          this.statusChange(thin, true);
        })
        .catch(value => {
          if (value == "cancel") {
            this.statusChange(thin, false);
          }
        });
    },
    //选择classic时联动stage
    changeClassic(val) {
      this.getStageList(val);
    },
    //项目阶段时间选择
    dateChange(value, index) {
      let len = this.stageData.length;
      if (
        index > 0 &&
        this.stageData[index - 1].value.length > 0 &&
        value[0] < this.stageData[index - 1].value[1]
      ) {
        // this.stageData.map((ite, idx) => {
        //   if (idx > index) {
        //     ite.disabled = true;
        //   }
        // });
        this.$message.warning("请正确选择时间段");
        return;
      }
      // else {
      // this.stageData.map((ite, idx) => {
      //   if (idx > index) {
      //     ite.disabled = false;
      //   }
      // });
      // }
      // console.log(this.stageData, "this.stageData");
    },

    save() {
      let formDataAll = {};
      let newDevTest = [];
      let newStage = [];
      let files = [];
      // console.log(this.stageData, "this.stageData");
      if (this.stageData && this.stageData.length < 1) {
        this.$message.warning("请选择有项目阶段的项目类别!");
        return;
      }
      this.stageData.map(item => {
        if (!item.value) {
          return this.$refs.editDataForm.validateField(`data${item.id}`);
        }
        return newStage.push({
          stage_id: item.stage_id,
          start_time: formatDate(item.value[0], "yyyy-MM-dd"),
          end_time: formatDate(item.value[1], "yyyy-MM-dd")
        });
      });
      if (newStage.length < 1) {
        return;
      }
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (
            (!this.isAdd &&
              !this.fileList.length > 0 &&
              !this.filesData.length > 0) ||
            (this.isAdd && this.filesData && !this.filesData.length > 0)
          ) {
            this.$message.warning("请上传文件");
            return;
          }
          if (
            !this.isAdd &&
            this.filesData.length < 1 &&
            this.fileList.length > 0
          ) {
            // console.log(this.fileList, this.filesData, 1111);
            this.fileList.map(item => {
              if (item.path) {
                this.filesData.push({ path: item.path, name: item.name });
              }
            });
          }
          if (this.filesData.length > 0) {
            this.filesData.map(item => {
              files.push({ path: item.path, name: item.name });
            });
          } else {
            this.$message.warning("请上传文件");
            return;
          }
          if (this.filesData.length !== this.fileList.length) {
            this.$message.warning("还有未上传文件");
            return;
          }
          // console.log(this.filesData, files, "this.filesData");
          //判断是否为空开发测试人员
          // if (this.datas.devTest && !this.datas.devTest.length > 0) {
          //   return;
          // }
          if (this.datas.devTest.length > 0) {
            this.datas.devTest.map(item => {
              this.datas.teamData.filter(val => {
                item === val.id
                  ? newDevTest.push({ uid: val.id, zn_name: val.realname })
                  : "";
              });
            });
          }
          // console.log(this.datas.project_skiller, "this.datas.project_skiller");
          formDataAll = {
            project_no: this.datas.project_no, //string,项目编号
            project_name: this.datas.project_name, //string,项目名
            project_class: this.datas.project_class, //int,项目类别ID
            project_level: this.datas.project_level, //项目优先级别
            project_des: this.datas.project_des, //string,描述
            project_pm: this.datas.project_pm, //int,项目经理id
            project_skiller: this.datas.project_skiller
              ? this.datas.project_skiller
              : "", //int,项目技术负责人id
            project_stageroute_object: [...newStage], //stage
            project_file: [...files], //上传文件list
            teamlist: [...newDevTest] //开发测试人员
          };
          this.loading = true;
          this.saveForm(formDataAll);
          // this.cancel();
        } else {
          return false;
        }
      });
    },
    validDateDate(rule, value, callback) {
      let curIndex = this.stageData.findIndex(
        item => `data${item.id}` === rule.field
      );
      // console.log(rule, this.stageData[curIndex], curIndex, value, "rule-value");
      if (
        this.stageData[curIndex].value &&
        this.stageData[curIndex].value.length > 1
      ) {
        return true;
      } else {
        callback(new Error(`请选择时间范围`));
        return;
      }
      callback();
    },

    isEmpty(value) {
      if (!value || value.length < 1) {
        return true;
      }
      return false;
    },
    validate(id, prop, value, des) {
      if (this.isEmpty(value)) {
        return {
          success: false,
          message: `请${des}`
        };
      }
      return { success: true };
    },
    getRules() {
      return {
        project_no: [
          {
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.project_no,
                "project_no",
                this.datas.project_no,
                "填写项目编号"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: ["blur", "change"]
          }
        ],
        project_name: [
          {
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.project_name,
                "project_name",
                this.datas.project_name,
                "填写项目名称(15字内)"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: ["blur", "change"]
          }
        ],
        project_class: [
          {
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.project_class,
                "project_class",
                this.datas.project_class,
                "选择项目类别"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: ["blur", "change"]
          }
        ],
        project_level: [
          {
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.project_level,
                "project_level",
                this.datas.project_level,
                "选择项目优先级别"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: ["blur", "change"]
          }
        ],
        project_des: [
          {
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.project_des,
                "project_des",
                this.datas.project_des,
                "填写项目描述"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: ["blur", "change"]
          }
        ],
        project_pm: [
          {
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.project_pm,
                "project_pm",
                this.datas.project_pm,
                "选择项目经理"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: ["blur", "change"]
          }
        ]
        // project_skiller: [
        //   {
        //     validator: (rule, value, callback) => {
        //       const result = this.validate(
        //         this.datas.project_skiller,
        //         "project_skiller",
        //         this.datas.project_skiller,
        //         "选择技术负责人"
        //       );
        //       if (!result.success) {
        //         callback(new Error(result.message));
        //         return;
        //       }
        //       callback();
        //     },
        //     trigger: ["blur", "change"]
        //   }
        // ]
        // devTest: [
        //   {
        //     validator: (rule, value, callback) => {
        //       const result = this.validate(
        //         this.datas.devTest,
        //         "devTest",
        //         this.datas.devTest,
        //         "选择开发测试人员"
        //       );
        //       if (!result.success) {
        //         callback(new Error(result.message));
        //         return;
        //       }
        //       callback();
        //     },
        //     trigger: ["blur"]
        //   }
        // ]
      };
    }
  }
};
</script>
<style lang="scss">
.edit-form {
  height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.el-step.is-center .el-step__line {
  top: 19px !important;
}
.el-upload-dragger {
  // width: 230px !important;
  width: 100% !important;
  height: 100px !important;
  line-height: 25px !important;
}
.el-upload-dragger .el-icon-upload {
  margin: 0 !important;
  line-height: 60px !important;
}
</style>
<style scoped>
.things-item .item-title {
  cursor: pointer;
  padding-right: 20px;
  color: #409eff;
}
.things-item .item-mark {
  padding-left: 20px;
  font-size: 12px;
}
.files-list {
  line-height: 28px;
}
.files-list > a {
  color: #409eff;
}
.files-list > i {
  margin-left: 10px;
  cursor: pointer;
}
.upload-demo {
  display: flex;
  padding-bottom: 10px;
}
.upload-demo >>> .el-upload-list {
  height: 100px;
  overflow-y: auto;
}
</style>>